<template>
	<view>	
		<view class="wrap">
			<u-swiper :list="list" :effect3d="true"></u-swiper>
		</view>
		<u-notice-bar mode="horizontal" :more-icon="true" :list="content"></u-notice-bar>
		<view class="title">
			<text style="padding-left: 80rpx;font-size: 35rpx;">企业展示</text>
		<view class="grid-box">		
			<view class="grid-item" v-for="item in list">
				<image :src="item.image"></image>
				<view>{{item.title}}</view>
			</view>	
			<view class="grid-item" v-if="manyGrid" @click="grids">
				<image src="../../static/arc.png"></image>
				<view>更多</view>
			</view>
		</view>
		</view>
		<view class="serive">
			<text style="padding-left: 80rpx;font-size: 35rpx;">服务区</text>
		<u-grid :col="3" style="margin-top: 20rpx;">
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">图片</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">锁头</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">沙漏</view>
				</u-grid-item>
			</u-grid>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				manyGrid:false,
				content: [
									'寒雨连江夜入吴',
									'平明送客楚山孤',
									'洛阳亲友如相问',
									'一片冰心在玉壶'
								],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '星辰'
					}
				],
			}
		},
		onLoad() {
			this.gridList()
		},
		methods: {
			gridList(){
				if(this.list.length>=7){
					this.list.length = 7
					this.manyGrid = true
				}
			},
			grids(){
				
				uni.navigateTo({
					url:'/pages/shouye/gridList'
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}
	.title{
		// background-color: lightgray;
		padding-top: 20rpx;
		// margin-top: 20rpx;
		
		// color: aliceblue;
	}
	.grid-box{
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
	}
	.grid-item{
		margin: 30rpx;
		text-align: center;
	}
	.grid-item image{
		border-radius: 50%;
		height: 100rpx;
		width: 100rpx;
	}
		.grid-text {
			font-size: 28rpx;
			margin-top: 4rpx;
			color: $u-type-info;
		}
</style>